<template>
    <div>
        <div>
            <Add @finish='getRoles'>
                <el-button type='primary' size='mini'>新 增</el-button>
            </Add>
        </div>
        <el-table border :data='rowsData' class='w-100 m-t-10'>
            <el-table-column align='center' prop='name' label='名称' />
            <el-table-column align='center' prop='remark' label='备注' />
            <el-table-column align='center'>
                <template #default='scope'>
                    <XRequestButton isConfirm confirmText='确定删除该角色吗' :click='async () => deleteSingleRole(scope.row.id, scope.$index)'>
                        <el-button type='text'>删除</el-button>
                    </XRequestButton>
                    <Add :formData='scope.row' @finish='getRoles'>
                        <el-button type='text'>编辑</el-button>
                    </Add>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
    import { ElMessage } from "element-plus";
    import { reactive } from "vue";
    import { deleteRoleApi, getRolesApi } from '../../../api/permissionRole'
    import Add from './Add.vue'
    const rowsData = reactive([])

    function getRoles() {
        getRolesApi().then(rules => {
            rowsData.splice(0)
            rowsData.push(...rules)
        })
    }


     async function deleteSingleRole(id:number, index:number) { //删除
        const res = await deleteRoles([id])
        if(res.success) {
            ElMessage.success!('删除成功')
            rowsData.splice(index, 1)
        }else {
            ElMessage.error!(res.msg)
        }
    }

    async function deleteRoles(ids:number[]) {
        return deleteRoleApi(ids)
    }

    getRoles()

</script>